<template>
  <div class="app-container">
    <el-card>
      <el-form :model="searchForm" inline size="small">
        <el-form-item label="关键字搜索">
          <el-input
            v-model="searchForm.label"
            placeholder="请输入关键字"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="问卷类型">
          <el-select
            v-model="searchForm.type"
            placeholder="请选择类型"
            clearable
            size="small"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-select
            v-model="searchForm.matchType"
            placeholder="请选择产品类型"
            clearable
            size="small"
          >
            <el-option
              v-for="item in matchTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="条件">-->
        <!--          <el-input-->
        <!--            clearable-->
        <!--            v-model="searchForm.conditions"-->
        <!--            placeholder="请输入条件"-->
        <!--          ></el-input>-->
        <!--        </el-form-item>-->

        <el-form-item>
          <el-button icon="el-icon-refresh" size="small" @click="reset"
            >重置</el-button
          >

          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="searchList()"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="add"
        >新增题目</el-button
      >

      <el-table
        :data="tableData.list"
        border
        size="small"
        style="width: 100%; margin-top: 20px"
        :loading="listLoading"
      >
        <el-table-column align="center" label="序号" type="index" width="50" />

        <el-table-column align="center" label="题目" prop="label">
        </el-table-column>
        <el-table-column align="center" label="条件" prop="conditionsName">
        </el-table-column>
        <el-table-column align="center" label="问卷类型">
          <template slot-scope="scope">
            {{ scope.row.type | typeFilter }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="产品类型" prop="matchType">
          <template slot-scope="scope">
            {{ scope.row.matchType.join(",") }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
        ></el-table-column>
        <el-table-column
          label="创建人"
          align="center"
          prop="createBy"
        ></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.publishStatus"
              :active-value="1"
              :inactive-value="2"
              @change="changeStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="scope.$index == 0"
              type="text"
              @click="UpStatus(scope.$index, scope.row)"
              >上移</el-button
            >
            <el-button
              :disabled="upCount(scope.$index)"
              size="mini"
              type="text"
              @click="downStatus(scope.$index, scope.row)"
              >下移</el-button
            >
            <el-button type="text" size="mini" @click="detail(scope.row)"
              >详情</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.publishStatus !== 2"
              size="mini"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              :disabled="scope.row.publishStatus !== 2"
              @click="deleteProduct(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pageRight"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </el-card>
    <addQuestion
      @getList="getList"
      :matchTypeList="matchTypeList"
      ref="addQuestion"
    ></addQuestion>
    <questionDetail
      :matchTypeList="matchTypeList"
      ref="questionDetail"
    ></questionDetail>
  </div>
</template>

<script>
import {
  getMatchingQuestionList,
  deleteMatchingQuestion,
  batchUpdateStatus,
  updateSort
} from "@/api/product";
import { getDictLabel } from "../../utils/dict";
import addQuestion from "./components/addQuestion.vue";
import questionDetail from "./components/questionDetail.vue";
export default {
  components: {
    addQuestion,
    questionDetail
  },
  filters: {
    typeFilter(type) {
      const mapObj = {
        1: "填空",
        2: "单选题",
        3: "多选题"
      };
      return mapObj[type];
    }
  },
  data() {
    return {
      searchForm: {
        label: "",
        matchType: "",
        conditions: "",
        pageNum: 1,
        pageSize: 10
      },
      tableData: {
        list: [],
        total: 0
      },
      listLoading: false,
      matchTypeList: [],
      typeList: [
        { label: "填空", value: 1 },
        { label: "单选题", value: 2 },
        { label: "多选题", value: 3 }
      ],
      selctList: []
    };
  },
  async created() {
    this.matchTypeList = await this.$getDictData("match_type");
    await this.getList();
  },
  methods: {
    searchList() {
      this.searchForm.pageNum = 1;
      this.getList();
    },
    UpStatus(idx, v) {
      let params = {
        pid: v.id,
        tid: this.tableData.list[idx - 1].id
      };
      updateSort(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    downStatus(idx, v) {
      let params = {
        pid: v.id,
        tid: this.tableData.list[idx + 1].id
      };
      updateSort(params).then(res => {
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.getList();
        }
      });
    },
    upCount(idx) {
      let flag = false;
      if (
        this.searchForm.pageSize - 1 == idx ||
        (this.tableData.list.length < this.searchForm.pageSize &&
          idx == this.tableData.list.length - 1)
      ) {
        flag = true;
      }
      return flag;
    },
    changeStatus(v) {
      batchUpdateStatus({
        ids: [v.id],
        publishStatus: v.publishStatus
      }).then(res => {
        this.$message.success("操作成功");
        this.getList();
      });
    },

    detail(v) {
      this.$refs.questionDetail.openDetail(v);
    },
    deleteProduct(v) {
      this.$confirm("是否删除该题目", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteMatchingQuestion(v.id).then(res => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {});
    },
    add() {
      this.$refs.addQuestion.showDrawer();
    },
    edit(v) {
      this.$refs.addQuestion.showDrawer(v);
    },
    reset() {
      this.searchForm = {
        label: "",
        pageNum: 1,
        pageSize: 10
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      getMatchingQuestionList(this.searchForm)
        .then(res => {
          this.tableData.list = res.data.list;
          res.data.list = res.data.list.forEach(item => {
            item.matchType = getDictLabel(item.matchType, this.matchTypeList);
          });
          this.tableData.total = res.data.total;
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    }
  }
};
</script>

<style></style>
